
<template>
   <div id="visual">
      <div class="visual-app">
         <header>
               <topComponent name="榆林市公共资源交易平台数字见证大厅" @click.native="$router.push({path:'/ksh'})"></topComponent>
               <div class="header_button" v-if="!query.projectId"> 
                  <el-radio-group v-model="tabPosition"  @change="handleTabsChange">
                     <el-radio-button label="top">项目监控 </el-radio-button>
                     <el-radio-button  label="left">场地监控</el-radio-button>
                  </el-radio-group>
               <div >
                     <!-- <svg class="iconfontSvg"     aria-hidden="true" :class="{active: spiltIndex === 0}" @click="spiltIndex=0">
                        <use xlink:href="#icon-a-mti-1fenpingshi"></use>
                     </svg> -->
                     <svg class="iconfontSvg"     aria-hidden="true" :class="{active: spiltIndex === 1}" @click="handleSVGcheng(1)">
                        <use xlink:href="#icon-a-mti-4fenpingshi" ></use>
                     </svg>
                     <svg class="iconfontSvg"     aria-hidden="true" :class="{active: spiltIndex === 2}" @click="handleSVGcheng(2)">
                        <use xlink:href="#icon-a-mti-6fenpingshi" ></use>
                     </svg>
                     <svg class="iconfontSvg"     aria-hidden="true" :class="{active: spiltIndex === 3}" @click="handleSVGcheng(3)">
                        <use xlink:href="#icon-a-mti-9fenpingshi" ></use>
                     </svg>
                     <svg class="iconfontSvg"     aria-hidden="true" :class="{active: spiltIndex === 4}" @click="handleSVGcheng(4)">
                        <use xlink:href="#icon-a-mti-12fenpingshi" ></use>
                     </svg>
                  </div>
               </div>
         </header>
        
         <section>
            <div v-if="!query.projectId">
               <div v-if="tabPosition === 'top'" class="left_menu" >
                  <div class="left_menu_div">
                     <div class="left_menu_tabs" >
                        <span @click="handleLeftPid('first')" 
                        :style="{borderBottom:activeName === 'first'?'2px solid #fff':'',fontWeight: activeName === 'first'?'bold':''}">今日项目</span>
                        <span @click="handleLeftPid('two')" 
                        style="margin-left: 10px;"
                        :style="{borderBottom:activeName === 'two'?'2px solid #fff':'',fontWeight: activeName === 'two'?'bold':''}">历史项目</span>
                        <i class="el-icon-arrow-down" style="margin-top: 6px;margin-left: 4px" @click="activeNameFlg = !activeNameFlg" v-if="activeName === 'two'" ></i>
                         <div class="left_menu_tabs_time" v-if="activeNameFlg && activeName === 'two'" >
                           <span class="triangle" style="left: 20px;top: -8px;"></span>
                           <el-form ref="form" :model="form" size="mini" label-width="40px" >
                              <el-form-item label="时间">   
                                 <el-date-picker
                                 style="width: 230px;"
                                    v-model="form.time"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    :picker-options="pickerOptions"
                                    @change="handTimeChange"
                                    end-placeholder="结束日期">
                                 </el-date-picker>
                              </el-form-item>
                              <el-form-item label="名称">
                                 <el-input v-model="form.search" style="width: 190px;"></el-input> 
                                  <button  class="jfbutton" style="margin-left: 10px;" @click.prevent="handleSubmit">查询</button>
                              </el-form-item>
                           </el-form>
                         </div>
                     </div>
                     <div class="left_menu_first" >
                        <div :class="{ activeDiv:form.type === 'KB'}" name="KB" @click="handleChangeActiveDiv('KB')">开标项目</div>
                        <div :class="{ activeDiv:form.type === 'PB'}" name="PB" @click="handleChangeActiveDiv('PB')">评标项目</div>
                     </div>
                  </div>
                  <ul>
                     <li  class="popoverli"><span> 序号</span><p  style="text-align: center;width: 100%;">项目名称</p></li>
                  </ul>
                  <ul class="left_menu_ul">
                     <el-scrollbar style="height: 100%;">
                        <el-popover 
                        v-for="(item,index) in listMenu"  :key="index" 
                        @mouseover.native="item_text_hover = index"
                      
                           placement="right-start"
                           popper-class="monitor-yt-popover"
                           width="260"
                            trigger="hover"
                        >
                        <div class="popover-main">
                           <div>项目名称：{{ item.name }}</div>
                           <div>项目类型：{{ getXMLX(item)  }}</div> 
                           <div>开标标室：{{ item.kbroom }}</div>
                           <div>开标时间：{{ item.kbkstime }}</div>
                           <div>评标标室：{{ item.pbroom }}</div>
                           <div>评标时间：{{ item.pbkstime }}</div>
                           
                        </div>
                        <!-- <li  :class="{'activeli':item_text_hover === index} > <div></div> {{ item.name }}</li> -->
                        <li class="popoverli "    @click.capture="handleMevu(item)" :class="{'activeli': item_text_hover=== index}"  slot="reference">
                           <span>{{ index+1 }}</span> <span class="text-overflow">{{ item.name }}</span> 
                        </li>
                        </el-popover>
                     </el-scrollbar>
                  </ul>
               </div>
               <!-- 项目树 -->
               <div v-else class="left_menu tree">
                  <el-input
                     placeholder="输入关键字进行过滤"
                     v-model="filterText">
                        <template slot="prepend">
                           <el-button slot="append" icon="el-icon-search"></el-button>
                        </template>
                     </el-input>
                     <el-tree
                     class="filter_tree"
                     :data="treeData"
                      @node-click="treeNodeClickEvent"
                     :props="defaultProps"
                     :filter-node-method="filterNode"
                     ref="tree">
                     <span class="custom-tree-node" slot-scope="{ node, data }"> 
                      <svg class="iconfontSvg"  v-if="node.data.nodeType === 'DEVICE'"  aria-hidden="true"  style="width: 12px;height: 12px;">
                        <use xlink:href="#icon-a-mti-videoCamera" ></use>
                     </svg>
                    
                      {{ node.label }}       
                     </span>
                     </el-tree>
               </div>
            </div>
            <!-- 右侧视频监控功能 -->
           <main>
               <div class="main_top">
                  <p v-if="this.query.projectName">{{query.projectName}}</p>
                  <!-- <span>选择监控{{ spiltIndex }}</span> -->
                  <!-- <span class="triangle"></span> -->
               </div>
               <!-- <hrm-player :width="900" :height="500" :autoplay="true" :controls="true" ref="myPlayer" :source="src"/> -->
               <!-- <hrm-player :width="400" :height="500" :autoplay="true" :controls="true" ref="myPlayer" :source="src"/> -->
               <videoComponent ref="videoComp" :spiltIndex.sync="spiltIndex" style="width:calc(100% - 70px);height:calc(100% - 70px);"></videoComponent>
           </main>
         </section>
       </div>
   </div>
 </template>
  
 <script>
 import { dvListBidInfo,dvListAreaRoom,dvGetlistCamera, dvListProjectCamera,dvGetCameraTree} from "@/api/pageViewBig"
 import topComponent from "@/components/top"
 import videoComponent from './videoComponent.vue';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn'; // 引入中文语言包
  
 export default {
   components: {  videoComponent,topComponent },
   watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
   data() {
     return {
      pickerOptions:{
        disabledDate: time => {
         // 选取前三个月数据
          let threeDate = new Date(); 
          threeDate.setMonth(threeDate.getMonth() - 3)
          return time.getTime()<threeDate.getTime() || time.getTime()> new Date().getTime()
        }

      },
      query:{},
      tabPosition:'top',
      activeNameFlg:false,
      item_text_hover:false,
      activeName:'first',
      spiltIndex:1,
      treeData: [{
          id: 1,
          label: '10楼',
          children: [{
            id: 4,
            label: '评标室',
            children: [{
              id: 9,
              label: '评标室1'
            }, {
              id: 10,
              label: '评标室2'
            }]
          },
          {
            id: 41,
            label: '开标室',
            children: [{
              id: 91,
              label: '开标室1'
            }, {
              id: 102,
              label: '开标室2'
            }]
          }
         ]
        }, {
          id: 2,
          label: '11楼',
          children: [{
            id: 5,
            label: '评标室1'
          }, {
            id: 6,
            label: '评标室2'
          }]
        }],
      // 树
      filterText:'',
      defaultProps: {
          children: 'children',
          label: 'name',
          isLeaf: 'leaf'
        },
      form:{
         time:[],
         startTime:'',
         endTime:'',
         type:'KB', // KP、PB
         search:'',
      },
      listMenu:[],
     }
   },
   computed: {},
   created() {
      this.form.startTime = dayjs().format('YYYY-MM-DD')+ ' 00:00:00',// startTime:now.format('YYYY-MM-DD HH:mm:ss'),
      this.form.endTime = dayjs().format('YYYY-MM-DD')+ ' 23:59:59',
      this.query = this.$route.query
   
      if(this.query.projectId){
         return  this.getQuerySet()
      }
      
      this.getdvListBidInfo()
      // this.getDvListAreaRoom()
      this.dvGetCameraTree()
      
   },
   methods: {
      dvGetCameraTree(){
         dvGetCameraTree().then(res=>{
            this.treeData = res.data
            
         })
      },
      // 处理跳转过来过去历史监控
      getQuerySet(){
         const { pbRoomId,bidId,projectId,pbStartTime,pbEndTime,projectName } = this.query

         // console.log( this.query);
         let time = null
         if(pbStartTime && pbEndTime){
            time = [pbStartTime,pbEndTime]
         }
         const p = {
            projectId,
            bidId,
            roomId:pbRoomId
         }
         dvListProjectCamera(p).then(res=>{
            if(res.code === 0){
               const arr = res.data.map(x=>x.deviceId)
                  this.$refs['videoComp'].sendDevicePushAll(arr,time)
            }
         })
      },
      // 下拉箭头
      xxxxaa(x,y){
         console.log(x,y);
         
      },     
      loadNode(node, resolve){
         if (node.level === 0) {
          return resolve(node.data);
         }
     
        if (node.level === 1) {
          return resolve(node.data.children);
        }
        if (node.level === 2) {
        
         // const { roomid,districtid} = node.data
         // const areaType = node.data.areaType
         // let id = null
         // if(areaType === '1'){
         //  id =roomid
         // }else{
         //    id= districtid
         // }
         // dvGetlistCamera({id,areaType}).then(res=>{
         //    const arr = res.data.map(x=>{
         //      return {
         //       name:x.deviceName,
         //       deviceType:x.deviceType,
         //       deviceId:x.deviceId,
         //       id:x.deviceId,
         //       leaf:true,
         //       children:null
         //      }
         //    })
         //       resolve(arr.concat(node.data.children))
         //    })

          return   resolve(node.data.children)
        };
        
        if (node.level === 3) {
         // const { roomid,districtid} = node.data
         // const areaType = node.data.areaType
         // let id = null
         // if(areaType === '1'){
         //  id =roomid
         // }else{
         //    id= districtid
         // }
         
         // //  查询场地
         //  dvGetlistCamera({id,areaType}).then(res=>{
         //    // console.log('res',node.data.name,res.data);
         // //  const arr = res.data.map(x=>{
         // //      return {
         // //       name:x.deviceName,
         // //       deviceType:x.deviceType,
         // //       deviceId:x.deviceId,
         // //       id:x.deviceId,
         // //       leaf:true,
         // //       children:null
         // //      }
         // //    })
         //       resolve(arr)
         //    })
        }
        resolve([])

       
      },

      treeNodeClickEvent(data, node,){
         // console.log('data',data,node);
         //  批量播放
            // if(node.data.areaType){
            //    const { roomid,districtid} = node.data
            //       const areaType = node.data.areaType
            //       let id = null
            //       if(areaType === '1'){
            //       id =roomid
            //       }else{
            //          id= districtid
            //       }
            //    dvGetlistCamera({id,areaType}).then(res=>{
            //       // console.log(res);
            //       const arr =  res.data.map(x=>x.deviceId)
            //       this.$refs['videoComp'].sendDevicePushAll(arr)
            //    })
            // }
            if(data.nodeType === 'ROOM'){
               const arr =  data.children.map(x=>x.id)
               this.$refs['videoComp'].sendDevicePushAll(arr)
            }
            // 单个播放
            if(data.nodeType === "DEVICE"){
               this.$refs['videoComp'].clickEvent(data.id);
            }
  
      },
      // 获取房间结构
      getDvListAreaRoom(){
         dvListAreaRoom().then(res=>{
            if(res.code === 0){
             res.data.forEach(e=>{
                  e.name = e.floorname +'楼'
                  e.leaf= false
                  // roomList 存在0 不存在1
                  // e.areaType = e?.roomList? '0':'1'
                  e.children = e.districtList
                  e.children.forEach(x=>{
                     x.children = x.roomList
                     x.name = x.districtName
                     e.leaf= false
                      x.areaType = x?.roomList? '0':'1'
                      x.children.forEach(y=>{
                        y.areaType = y?.roomList? '0':'1'
                       
                     })
                  })
               })
               console.log('data',res.data);
               this.treeData = res.data
            }
         })
      },
      // 项目监控  场地监控
      handleTabsChange(){},
      handTimeChange(){
         if(this.form.time.length > 0){
            this.form.startTime = dayjs(this.form.time[0] ).format('YYYY-MM-DD HH:mm:ss')
            this.form.endTime =  dayjs(this.form.time[1] ).format('YYYY-MM-DD HH:mm:ss')
         }
         this.getdvListBidInfo()
      },
      handleChangeActiveDiv(val){
         this.$set(this.form,'type',val)
         this.getdvListBidInfo()
      },
      handleMevu(item){
         const { xmguid,guid,pbroomid,kbroomid,kbkstime,kbjstime,pbkstime,pbjstime } = item
         const params = {
            projectId:xmguid,
            bidId:guid,
            roomId:this.form.type === 'KB'?kbroomid:pbroomid  
         }
         dvListProjectCamera(params).then(res=>{
            // console.log('res',res);
            
            if(res.code ===0){
               const arr = res.data.map(x=>x.deviceId)
               // 如果是历史项目
               if(this.activeName === 'two'){
                  const startTime = this.form.type === 'KB' ? kbkstime:pbkstime
                  const endTime = this.form.type === 'KB'?kbjstime:pbjstime
                  this.$refs['videoComp'].sendDevicePushAll(arr,[startTime,endTime])
                  return 
               }
               this.$refs['videoComp'].sendDevicePushAll(arr)
             
                              

            }
         })
      },
      getXMLX(item){
         const  jylx =  item?.xm?.jylx
         if(jylx === 'JSGC') return '建设工程'
          return '政府采购'
      },
      // 查询项目信息
      handleSubmit(){
            this.getdvListBidInfo()
      },
      // 获取项目列表
      getdvListBidInfo(){
         console.log('this.form',this.form);
         dvListBidInfo(this.form).then(res=>{
            console.log('项目列表',res);
            if(res.code === 0){
               this.listMenu = res.data
            }
            
         })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      handleSVGcheng(index){
         this.spiltIndex = index
      },
      //   今日项目 历史项目
      handleLeftPid(val){
         this.activeName = val
         if(val === 'two'){
            // 选取前三个月数据
          let threeDate = new Date(); 
          threeDate.setMonth(threeDate.getMonth() - 1)
          const today = dayjs(threeDate).format('YYYY-MM-DD')+ ' 00:00:00'
            // 历史的 30天内
            this.form.startTime = today
            const now = dayjs();
            const yesterday = now.subtract(1, 'day');
            this.form.endTime = yesterday.format('YYYY-MM-DD')+ ' 23:59:59'
         } else{
            // 近日的
            this.form.startTime = dayjs().format('YYYY-MM-DD')+' 00:00:00'
            this.form.endTime = dayjs().format('YYYY-MM-DD')+ ' 23:59:59'
         }
         this.getdvListBidInfo()



         // this.getdvListBidInfo()
      },
      handleClick(){
         console.log(111);
         
      }
   }
 }
 </script>
  <style lang="scss">
    
  .el-popover.monitor-yt-popover {
   width: 300px;
   height: 236px;
   padding: 4px;
   font-size: 14px;
   z-index: 2;
   border-radius: 4px;
   background-color: #090d29;
   border-color: #146ebd;
    border: 2px solid #4395FF;
    background: linear-gradient( 180deg, #02439E 0%, #00082E 79%, #004E9C 100%);
    box-shadow: inset 0px 0px 39px 0px #024DE1;
  }
  .popover-main{
    color: #fff;
   //  border: 1px solid red;
     div{
      padding:0 4px;
      height: 30px;
     
      &:first-child {
         padding-top: 10px;
         height: 50px;
         background: linear-gradient( 90deg, #02439E 0%, #00082E 60%, #004E9C 100%);
      }
     }
     
  }
//   .custom-tree-node 
 .el-icon-video-camera-solid{
   display: block;
   color: red !important;
   font-size:20px !important;
   width: 20px !important;
   height: 20px !important;
}
 
</style>
  
 <style lang="scss" scoped>
 #visual {
   width: 100%;
   height:100vh;
   background: url("../../../../assets/bg.jpg");
   overflow: hidden;
   background-size: 100% 100%;
   ul,li{
      list-style: none;
      margin: 0;
      padding: 0;
   }
   .visual-app {
     width:  100%;
     height: 100vh;
   //   overflow: hidden;
     header {
       width: 100%;
       height: 174px;
       .titleFont{
         font-family: HYYaKuHeiJ; //汉仪雅酷黑简 Regular
         font-size: 34px;
         color: #FFFFFF;
         line-height: 47px;
         text-align: center;
         font-style: normal;
         height: 64px;
         line-height: 64px;
       }
       .header_button{
         height: 60px;
         display: flex;
         align-items: center;
         padding: 0 10px;
         justify-content: space-between;
       }
       
     }
     section {
       width: 100%;
       box-sizing: border-box;
       padding: 0px 10px;
       color:#fff;
      
       display: flex;
       li{
         height: 44px;
         background-color: #013A86;
       }
       .left_menu{
         box-sizing: border-box;
         cursor: pointer;
         width: 365px;
         height: calc(100vh - 200px);
         padding:10px 8px;
         background-image:url("../../../../assets/imgs/dp/底图@2x.png");
         background-size:100% 100%;
         // background-attachment:fixed;
         .left_menu_div{
            height: 120px;
            padding: 5px 10px;
         }

         .left_menu_tabs{
               position: relative;
               height: 60px;
               line-height: 52px;
               font-size: 18px;
               display: flex;
            
               span{
                  display: inline-block;
                  height: 30px;
                  line-height: 30px;
               }
               .left_menu_tabs_time{
                 
                  position: absolute;
                  z-index: 1;
                  top: 40px;
                  left: 86px;
                  width: 450px;
                  display: flex;
                  align-items: center;
                  padding: 8px 0px;
                  background: linear-gradient( 180deg, #02439E 0%, #00082E 79%, #004E9C 100%);
                  box-shadow: inset 0px 0px 39px 0px #024DE1;
                  border: 2px solid #4395FF;
                
                  // .triangle{
                  //    position: absolute;
                  //    top: -6px;
                  //    left: 100px;
                  //    width: 0;
                  //    height: 0;
                  //    border-left: 0px solid transparent;
                  //    border-right: 10px solid transparent;
                  //    border-top: 10px solid #4395FF;
                  //    transform:rotate(45deg);
                  // }
               }
            }
         .left_menu_first{
            height: 34px;
            border-radius: 5px;
            // margin-left: 0px;
            font-size: 14px;
            border: 1px solid #4395FF;
            background-color: #021a79;
            color:#e5e5e5;
            display: flex;
            justify-content: space-around;
            align-items: center;
            > div {
               height: 100%;  
               width: 100%;
               display: inline-block;
               line-height: 34px;
               text-align: center;
               // background: #fff;
               width: 100%;
               &:last-child{
                  // border-left: 1px solid #e5e5e5;
               }
               &.activeDiv{
                 background-color: #1890ff;
               }
            }
            
         }
         .left_menu_ul{
            height: 650px;
       
         }
       
         //列表
         .triangle{
            position: absolute;
            top: -6px;
            left: 100px;
            width: 0;
            height: 0;
            border-left: 0px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #4395FF;
            transform:rotate(45deg);
         }
         .popoverli{
            display: flex;
            margin-bottom: 6px;
            height: 44px;
            font-size: 16px;
            line-height: 44px;
            border: 1px solid #013A86;
            >span:first-child {
               width: 60px;
               text-align: center;
             
            }
            >span:nth-child(2){
               display: inline-block;
               width: 420px;
            }
            .text-overflow {
               white-space: nowrap; /* 不换行 */
               overflow: hidden; /* 隐藏超出的内容 */
               text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
               max-width: 280px; /* 设置最大宽度以限制文本的显示长度 */
            }
         }
         .activeli{
            border: 1px dashed #fff;
            background-color: #0A6ACF;
           
         }
      

         // 树组件
         &.tree{
            .filter_tree{
               height: 780px;
               overflow-y: scroll;
            }
            .filter_tree{
               margin-top: 20px;
               background-color:transparent;
               color: #fff;
            }
            ::v-deep .el-tree-node__content:hover {
               background: #245FCD;
               color: #fff;
            }
            ::v-deep .el-tree-node__expand-icon{
               color: #fff;
            }
            ::v-deep .el-input__inner{
               background-color: #0c4f97;
               border: 1px solid #4395FF;
               color: #fff;
            }
            ::v-deep .el-input-group {
               border: 1px solid #4395FF;
            }
            ::v-deep .el-input__inner::placeholder {
               color: #cfcfcf;
            } 
            ::v-deep .el-icon-search{ 
               color: #fff;
            }
         
         }
       }
       main{
         width: 100%;
         height: calc(100vh - 240px);
         margin-left: 20px;
         margin-right: 20px;
         background-image:url("../../../../assets/imgs/dp/监控背景底@2x.png");
         background-size:100% 100%;
         padding: 20px 10px;
        
         // background-attachment:fixed;
         .main_top{
            height: 76px;
            line-height: 76px;
            text-align: center;
            .triangle{
               display: inline-block;
               width: 0;
               height: 0;
               margin-top: 20px;
               margin-left: 14px;
               border-left: 6px solid transparent;
               border-right: 6px solid transparent;
               border-top: 8px solid #fff;
            }
         }
      }
       
     }
    
   }
 }
//  图标样式
.iconfontSvg{
    width: 28px;
    height:28px;
    fill:#fff;
    margin-left: 10px;
  }
  .iconfontSvg.active{
    fill:#0984ff !important;
  
  }




//  element-ui
 ::v-deep  .el-tabs--bottom, .el-tabs--top{
   height: 30px;
 }
 ::v-deep .el-radio-button__inner{
   width: 182px;
   height: 38px;
   padding: 0px;
   line-height: 36px;
   background: #013A86;
   border-radius: 0px 5px 5px 0px;
   border: 1px solid #1984f7;
   color: #fff;
   font-size: 18px;
 }
 
 ::v-deep .el-radio-button:first-child .el-radio-button__inner{
   border-left:1px solid #1984f7;
 }
 ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
   font-weight: bold;
 }
//  form表单
 ::v-deep .el-form {
   // border: 1px solid red;
   color: #fff;
 }
 ::v-deep .el-form-item__label{
   color: #fff;

 }
//  时间框
 ::v-deep .el-range-input{
   background-color: #0c4f97;
   color: #fff;
 }
 ::v-deep .el-range-editor.el-input__inner{
   background-color: #0c4f97;
   border: 1px solid #4395FF;
   color: #fff;
 }
 ::v-deep .el-range-separator{
   color: #acacac;
   margin-top: -2px;
   // font-size: 14px;
 }

 // 输入框
 ::v-deep .el-input.el-input--mini .el-input__inner{
   background-color: #0c4f97;
   border: 1px solid #4395FF;
   color: #fff;
 }
 .jfbutton{
   background-color: #4395FF;
   color: #fff;
   border: 2px solid #4395FF;
   border-radius: 2px;
 }

//  tree 输入框

// ::v-deep .el-tree-node__expand-icon {
//    color:#7d8181;
// }
// ::v-deep .el-tree-node__expand-icon.is-leaf {
//    color: transparent !important;
//    cursor: default;
// }


 </style>

